<template>
    <div class="custom-tab-bar">
        <van-tabbar route v-model="active" @change="onChange" @before-change="handleBeforeChange()"
            inactive-color="#a6a6a6" active-color="#83cc2b" placeholder safe-area-inset-bottom>
            <van-tabbar-item v-for="(item, index) in list" :key="index" :to="item.name" replace>
                <span>{{ item.title }}</span>
                <template #icon="props">
                    <img :src="props.active ? item.active : item.normal" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
    name: 'TabBar',
    setup() {
        const active = ref(0);

        const list = [
            {
                name: '/',
                title: '首页',
                active: new URL('@/assets/images/nav_icon/home_select.png', import.meta.url).href,
                normal: new URL('@/assets/images/nav_icon/home.png', import.meta.url).href,
            },
            {
                name: '###',
                title: '识别',
                active: new URL('@/assets/images/nav_icon/search_select.png', import.meta.url).href,
                normal: new URL('@/assets/images/nav_icon/search.png', import.meta.url).href,
            },
            {
                name: '##',
                title: 'AI智聊',
                active: new URL('@/assets/images/nav_icon/chat_select.png', import.meta.url).href,
                normal: new URL('@/assets/images/nav_icon/chat.png', import.meta.url).href,
            },
            {
                name: '/mine',
                title: '我的',
                active: new URL('@/assets/images/nav_icon/mine_select.png', import.meta.url).href,
                normal: new URL('@/assets/images/nav_icon/mine.png', import.meta.url).href,
            },
        ];

        const onChange = (index) => {
            console.log('index：', index);
        };
        const handleBeforeChange = (e) => {
            console.log('=====', e);
            return false;
        };

        return { active, list, onChange, handleBeforeChange };
    },
});
</script>

<style lang="scss" scoped>
:deep(.van-tabbar) {
    height: 60px !important;
    border: 1px solid #e5e5e5;
}

:deep(.van-tabbar-item__icon > img) {
    width: 21px;
    height: 21px;
}



:deep(.circle-image-container) {
    position: absolute;
    z-index: 999;
    bottom: 66%;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 100px;
    height: 80px;
    overflow: hidden;
    background: transparent !important;
}

.circle-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>
